SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Progressive web app</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Progressive web app</span></h1>

</header>

</div>

/* start https://fr.wikipedia.org/ */

.mw-parser-output .entete.informatique{background-image:url("./_mw_/Picto.nfo.png")}

/* end https://fr.wikipedia.org/ */

</style>

<div><span style="color: #fff;">Progressive web app</span></div>

</div>

</div>

</p>

<table><caption style="background-color:#573EC2;color:#000000;">Informations</caption>

<th scope="row"><a href="D%C3%A9veloppeur" title="Développeur">Développé par</a></th>

<td>

<a href="Google" title="Google">Google</a></td>

</tr>

<tr>

<th scope="row"> <a href="Version_d'un_logiciel" title="Version d'un logiciel">Première version</a>

</th>

<td>

~2015</td>

</tr>

<tr>

<th scope="row"> <a href="Langage_de_programmation" title="Langage de programmation">Écrit en</a>

</th>

<td>

<a href="JavaScript" title="JavaScript">JavaScript</a>, <a href="JSON" class="mw-redirect" title="JSON">JSON</a></td>

</tr>

<tr>

<th scope="row"><a href="Plateforme_informatique" title="Plateforme informatique">Environnement</a></th>

<td>

Android, IOS, Windows</td>

</tr>

</tbody></table>

</p>

</div>

<p>Une <b>progressive web app</b> (<b>PWA</b>, <b>application web progressive</b> en français<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>) est une <a href="Application_web" title="Application web">application web</a> qui consiste en des <a href="Page_web" title="Page web">pages</a> ou des <a href="Site_web" title="Site web">sites web</a>, et qui peuvent apparaître à l'utilisateur de la même manière que les <a href="Application_(informatique)" title="Application (informatique)">applications</a> natives ou les <a href="Application_mobile" title="Application mobile">applications mobiles</a>. Ce type d'applications tente de combiner les fonctionnalités offertes par la plupart des <a href="Navigateur_web" title="Navigateur web">navigateurs</a> modernes avec les avantages de l'expérience offerte par les <a href="Appareil_mobile" title="Appareil mobile">appareils mobiles</a><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup class="reference cite_virgule">,</sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>.

</p><p>Une <b>PWA</b> se consulte comme un site web classique, depuis une URL sécurisée mais permet une <a href="Exp%C3%A9rience_utilisateur" title="Expérience utilisateur">expérience utilisateur</a> similaire à celle d'une application mobile, sans les contraintes de cette dernière (soumission aux App-Stores, utilisation importante de la <a href="M%C3%A9moire_(informatique)" title="Mémoire (informatique)">mémoire</a> de l'appareil…).

</p><p>Elles proposent de conjuguer rapidité, fluidité et légèreté tout en permettant de limiter considérablement les coûts de développement<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> : plus besoin de faire des développements spécifiques pour les applications en fonction de chacune des plateformes : <a href="IOS" title="IOS">iOS</a>, <a href="Android" title="Android">Android</a>…

</p>

<div class="mw-heading mw-heading2"><h2 id="Historique">Historique</h2></div>

<p>Durant les années 2000, les technologies du web sont progressivement passées de documents statiques (HTML) à des solutions dynamiques exécutées côté serveur avec des langages tels que <a href="PHP" title="PHP">PHP</a>. Lors de l’arrivée des <a href="Smartphone" title="Smartphone">smartphones</a> en 2007, les technologies du web ne sont plus adaptées face à l'augmentation de l'utilisation des applications mobiles. Ces dernières offrent une bien meilleure expérience utilisateur. Les ressources empaquetées et l'accès direct aux fonctions du téléphone ont permis aux applications natives d’être plus utilisées que les technologies web mobiles.

</p><p>Au milieu des années 2010, cependant, les améliorations continues en <a href="HTML5" title="HTML5">HTML5</a>, <a href="CSS3" class="mw-redirect" title="CSS3">CSS3</a> et JavaScript ainsi que des navigateurs web plus performants et conformes aux normes, ont fait des applications hybrides performantes une alternative viable.

</p><p>En 2015, Frances Berriman et l’ingénieur de <a href="Google" title="Google">Google</a> Alex Russell proposent le terme de  "progressive web apps"  pour décrire les sites Internet profitant des nouveaux avantages donnés par les <a href="Navigateur_web" title="Navigateur web">navigateurs web</a> notamment avec l’arrivée des Service workers <a href="https://en.wikipedia.org/wiki/Service_worker" class="extiw external" title="en:Service worker"><span class="indicateur-langue" title="Article en anglais : « Service worker »">(en)</span></a> et des fichiers manifestes <a href="https://en.wikipedia.org/wiki/Manifest_file" class="extiw external" title="en:Manifest file"><span class="indicateur-langue" title="Article en anglais : « Manifest file »">(en)</span></a>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Caractéristiques_des_PWA"><span id="Caract.C3.A9ristiques_des_PWA"></span>Caractéristiques des PWA</h2></div>

<p>Google a mis en place une liste de contrôles établissant une note via l’outil Lighthouse intégré dans le navigateur chrome qui permet de vérifier automatiquement le respect des caractéristiques suivantes :

</p>

<dl><dt>Progressive</dt>

<dd>les applications web progressives fonctionnent sur n'importe quel périphérique en intégrant les fonctionnalités disponibles du navigateur et de l'appareil utilisé.</dd>

<dt>Sécurisée</dt>

<dd>Afin de répondre aux problématiques de sécurité des échanges entre les utilisateurs et les sites, les PWA doivent être fiables et sûres par la mise en place d’un protocole HTTPS.</dd>

<dt>Engageante</dt>

<dd>elles proposent une expérience utilisateur immersive en plein écran et un réengagement facilité grâce à l'envoi de notifications push web.</dd>

<dt>Installable</dt>

<dd>l'utilisation d'un fichier manifest permet aux PWA de proposer, à l'instar d'une application mobile native, l'installation d'un raccourci sur l'écran d'accueil du terminal mobile.</dd>

<dt>Rapidité</dt>

<dd>d'après Google, 53 % des internautes abandonnent un site si le chargement prend plus de trois secondes. Une fois le site chargé, la navigation doit se faire de manière rapide et fluide.</dd>

<dt>Optimisation pour le référencement</dt>

<dd>utilisant les technologies du web, les progressive web app peuvent être référencées sur les <a href="Moteur_de_recherche" title="Moteur de recherche">moteurs de recherche</a> de la même manière que n'importe quel site web classique.</dd>

<dt>Indépendante de la connexion</dt>

<dd>Grâce à la gestion du cache via l’utilisation d’un Service Worker, une fois le contenu chargé une première fois, il est possible de le consulter même dans les zones de faible <a href="Connexion_r%C3%A9seau" title="Connexion réseau">connexion réseau</a>.</dd></dl>

<div class="mw-heading mw-heading2"><h2 id="Références"><span id="R.C3.A9f.C3.A9rences"></span>Références</h2></div>

<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://developer.mozilla.org/fr/Apps/Progressive"><cite style="font-style:normal;">Applications web progressives</cite></a> », sur <span class="italique">Mozilla Developer Network</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2018-01-15" data-sort-value="2018-01-15">15 janvier 2018</time>)</small></span></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a> </span><span class="reference-text">Illustration par l'exemple de la différence entre site web, Progressive Web App et application native : <a rel="nofollow" class="external free" href="https://www.powertrafic.fr/progressive-web-app-lequipe/">https://www.powertrafic.fr/progressive-web-app-lequipe/</a></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a> </span><span class="reference-text"><span class="ouvrage" id="2018">« <a rel="nofollow" class="external text" href="https://fredcavazza.net/2018/02/11/pourquoi-les-progressive-web-apps-sont-la-seule-alternative-viable-aux-applications-natives/"><cite style="font-style:normal;">Pourquoi les Progressive Web Apps sont la seule alternative viable aux applications natives</cite></a> », sur <span class="italique">FredCavazza.net</span>, <time class="nowrap" datetime="2018-02-11" data-sort-value="2018-02-11">11 février 2018</time> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2020-07-28" data-sort-value="2020-07-28">28 juillet 2020</time>)</small></span>.</span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a> </span><span class="reference-text"><span class="ouvrage" id="2017">« <cite style="font-style:normal">Progressive Web Apps : 5 raisons de s'y intéresser - Infographie</cite> », <i>progressive-web-apps</i>,‎ <time class="nowrap" datetime="2017-04-04" data-sort-value="2017-04-04">4 avril 2017</time> <small style="line-height:1em;">(<a rel="nofollow" class="external text" href="https://progressive-web-apps.fr/pwa-5-raisons-interesser-infographie">lire en ligne</a>, consulté le <time class="nowrap" datetime="2018-02-27" data-sort-value="2018-02-27">27 février 2018</time>)</small><span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.atitle=Progressive+Web+Apps+%3A+5+raisons+de+s%27y+int%C3%A9resser+-+Infographie&rft.jtitle=progressive-web-apps&rft.date=2017-04-04&rfr_id=info%3Asid%2Ffr.wikipedia.org%3AProgressive+web+app"></span></span></span>

</li>

</ol></div>

</div>

<ul id="bandeau-portail" class="bandeau-portail"><li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail de l’informatique</span> </span></li> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail d’Internet</span> </span></li> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail des télécommunications</span> </span></li> </ul></div><div><div class="zim-footer">

Cet article est issu de <a class="external text" title="Dernière modification le 2025-10-08" href="https://fr.wikipedia.org/wiki/?title=Progressive_web_app&oldid=229597057">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.

</div>

</div></div>

</div>

</main>

</div>

</body></html>